<template>
	<div style="height: 100%;">
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择班级</h1>
			<a class="mui-btn mui-pull-right sureBtn" @click="submitBtn()">确定</a>
		</header>
		<div class="mui-content" style="overflow: scroll;">
			<h5>院系/专业</h5>
			<ul class="cellUl proUl">
				<li class="mui-table-view-cell mui-col-xs-6" :class="{ 'active': index == proIndex }" v-for="pro,index in proList" @click="goGrade(pro.id,index,pro.name)">
					{{pro.name}}
				</li>
			</ul>
			<h5>年级</h5>
			<ul class="cellUl gradeUl">
				<li class="mui-table-view-cell mui-col-xs-6" :class="{ 'active': index == gradeIndex }" v-for="grade,index in gradeList" @click="goClass(grade.id,index,grade.name)">
					{{grade.name}}
				</li>
			</ul>
			<h5>班级</h5>
			<ul class="cellUl classUl">
				<li class="mui-table-view-cell mui-col-xs-6" :class="{ 'active': index == classIndex }" v-for="classs,index in classList" @click="addActive(classs.id,index,classs.name)">
					{{classs.name}}
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import {
		chooseClass
	} from '@/service/getData';
	import {
		saveToLocal,
		loadFromLocal
	} from '@/service/store';
	export default {
		data() {
				return {
					proList: [],
					proIndex: null,
					gradeList: [],
					gradeIndex: null,
					classList: [],
					classIndex: null,
					data: [],
					proTag: null,
					gradeTag: null,
					classTag: null,
					proName: "",
					gradeName: "",
					classsName: "",
					myApart: this.$route.params.role.split('&')[1],
					name:""
				}
			},
			created() {
				console.log(this.myApart)
				let self = this;
				chooseClass({
					"Userid": loadFromLocal("userInfo", "obj").userId
				}).then((res) => {
					self.data = res.data;
					(self.data || []).forEach(function(i) {
						self.proList.push({
							name: i.name,
							id: i.id,
							selected: false
						})
					})
				})
			},
			methods: {
				goGrade(id, index, name) {
					this.proTag = id;
					this.proName = name;
					this.gradeName = "";
					this.classsName = "";
					this.gradeTag = null,
						this.classTag = null,
						this.proIndex = index;
					this.gradeIndex = null;
					this.classIndex = null;
					let self = this;
					self.gradeList = [];
					self.classList = [];
					(this.data || []).forEach(function(i) {
						if(i.id == id) {
							self.gradeList = i.children;
						}
					})
				},
				goClass(id, index, name) {
					this.gradeTag = id;
					this.gradeName = name;
					this.classsName = "";
					this.classTag = null,
						this.gradeIndex = index;
					this.classIndex = null;
					let self = this;
					self.classList = [];
					(self.gradeList || []).forEach(function(i) {
						if(i.id == id) {
							self.classList = i.children;
						}
					})
				},
				addActive(id, index, name) {
					this.classTag = id;
					this.classsName = name;
					this.classIndex = index;
				},
				submitBtn() {
					let self = this;
					switch(self.myApart) {
						case '0': 
							{
								self.name = 'Course'
							}
							break;
						case '1': 
							{
								self.name = 'Morning'
							}
							break;
						case '2': 
							{
								self.name = 'Evening'
							}
							break;
						case '3': 
							{
								self.name = 'Sleep'
							}
							break;
					}
					this.$router.push({
						name: self.name,
						params: {
							role: self.$route.params.role.split('&')[0] + '&' + self.proTag + '&' + self.gradeTag + '&' + self.classTag + '&' + self.proName + '&' + self.gradeName + '&' + self.classsName
						}
					})
				}
			}
	}
</script>
<style scoped>
	.mui-content {
		background: #FFFFFF;
		padding: 44px 10px 0;
	}
	
	.sureBtn {
		background: #38ADFF;
		color: #FFFFFF;
		font-size: 16px;
		border: none;
		top: 5px;
		padding: 6px 0 7px 24px;
		text-align: center;
	}
	
	h5 {
		font-size: 15px;
		color: #333;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #E5E5E5;
		margin: 0;
	}
	
	.cellUl {
		padding: 10px 10px 0px 10px;
		overflow: hidden;
	}
	
	.cellUl:after {
		height: 0;
	}
	
	.cellUl li {
		float: left;
		border-radius: 4px;
		border: 1px solid #bbb;
		width: calc(50% - 10px);
		/*list-style: none;*/
		/*line-height: 40px;*/
		text-align: center;
		padding: 0;
		margin-bottom: 10px;
		color: #333333;
		font-size: 15px;
		padding: 5px 0;
	}
	
	.cellUl li.active {
		background: #1883D5;
		border: 1px solid #1883D5;
		color: #FFFFFF;
	}
	
	.cellUl li:after {
		height: 0;
	}
	
	.cellUl li:nth-child(odd) {
		margin-right: 20px;
	}
</style>